<template>
  <view class="p-movie-continar">
    <CTabs @changeTab="changeTab"></CTabs>
    <CScroll v-show="showType == 0" :height="scrollH" @onLower="onLower" @onRefresh="onRefresh">
      <CSwiper :bananers="bananers"></CSwiper>
      <CMovie v-for="movie in movieList" :key="movie.id"></CMovie>
    </CScroll>

    <CSelect v-show="showType == 1"></CSelect>
    <CScroll v-show="showType == 1" :height="scrollH" @onLower="onLower" @onRefresh="onRefresh">
      <CCinema v-for="movie in movieList" :key="movie.id"></CCinema>
    </CScroll>
  </view>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { useDidShow, getStorageSync, pxTransform } from '@tarojs/taro'
import { Toast } from '@nutui/nutui-taro'
import { getSysInfo } from '@/common/system'

import CScroll from '@/components/c-scroll'

import CTabs from '@/components/c-tabs'
import CSelect from '@/components/c-select'
import CSwiper from '@/components/c-swiper'
import CMovie from '@/components/c-movie'
import CCinema from '@/components/c-cinema'

const props = defineProps({
  background: {
    type: String,
    default: '#FFF'
  }
})

const bananers = ref([
  { id: '电影', url: 'https://oss.fxzb.vip/202206/18ba1e92952b1d4f2c7d04d63149ddb9.png' },
  { id: '影视VIP', url: 'https://oss.fxzb.vip/202206/7c8f828d5d05aad34a640015c76947dd.png' },
  { id: '美食', url: 'https://oss.fxzb.vip/202205/e6c51e5c75c424618880b8a0f3d6db4a.png' }
])

const movieList = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }, { id: '7' }])

const onRefresh = e => {
  console.log(e)
}

const onLower = e => {
  console.log(e)
}

const scrollH = ref(500)
useDidShow(() => {
  setTimeout(() => {
    const { topBarH, windowHeight } = getSysInfo()

    scrollH.value = windowHeight - topBarH - 72

    console.log(windowHeight)
  }, 0)
})

const showType = ref(0)
const changeTab = e => {
  showType.value = e
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.p-movie-continar {
  .scroll-wrap {
    padding: 10px 12px;
    min-height: calc(100% - 36px);
    box-sizing: border-box;
    background: $bg-color;
  }
}
</style>
